在HTML中引入JavaScript有几种常见的方法，包括内联脚本、内部脚本和外部脚本。以下是每种方法的详细说明和示例：

### 1. 内联脚本
内联脚本是直接在HTML标签中使用`onclick`或其他事件属性来编写JavaScript代码。这种方法适用于简单的事件处理。

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联脚本示例</title>
</head>
<body>
    <button onclick="alert('点击了按钮！')">点击我</button>
</body>
</html>
```

### 2. 内部脚本
内部脚本是将JavaScript代码放在HTML文档的`<script>`标签中，通常放在`<head>`或`<body>`部分。

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部脚本示例</title>
    <script>
        function showAlert() {
            alert('点击了按钮！');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">点击我</button>
</body>
</html>
```

### 3. 外部脚本
外部脚本是将JavaScript代码放在一个单独的`.js`文件中，然后在HTML文档中通过`<script>`标签引入。这是推荐的方法，因为它有助于分离HTML和JavaScript代码，提高代码的可维护性和性能。

**步骤：**
1. 创建一个JavaScript文件（例如`script.js`）。
2. 在HTML文档中使用`<script>`标签引入该文件。

**script.js**
```javascript
function showAlert() {
    alert('点击了按钮！');
}
```

**index.html**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部脚本示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showAlert()">点击我</button>
</body>
</html>
```

### 4. 使用`defer`和`async`属性
当引入外部脚本时，可以使用`defer`和`async`属性来控制脚本的加载和执行时机。

- **`defer`**
  - 脚本会在HTML解析完成后按顺序执行。
  - 适用于需要在DOM完全加载后执行的脚本。

- **`async`**
  - 脚本会在下载完成后立即执行，不保证按顺序执行。
  - 适用于独立的脚本，不需要依赖其他脚本。

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defer 和 async 示例</title>
    <script src="script1.js" defer></script>
    <script src="script2.js" async></script>
</head>
<body>
    <button onclick="showAlert()">点击我</button>
</body>
</html>
```

### 总结

- **内联脚本**：适用于简单的事件处理。
- **内部脚本**：适用于小型项目或简单的脚本。
- **外部脚本**：推荐用于大型项目，便于维护和性能优化。
- **`defer` 和 `async`**：用于控制外部脚本的加载和执行时机。

选择合适的方式可以提高代码的可读性和性能。